<script setup lang="ts">
import {DownOutlined,CheckCircleOutlined,StopOutlined,LoadingOutlined} from "@ant-design/icons-vue";

let dataSource = [
  {
    key: '1',
    name: 'Mysql 5.7',
    status: 32,
    act: '西湖区湖底公园1号',
  },

];

   let  columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
  },
  {
    title: '操作',
    dataIndex: 'act',
    key: 'act',
    width:120
  },
]

</script>

<template>
  <a-card  title="服务列表" size="small">
    <a-table :dataSource="dataSource" :columns="columns" size="small" :showHeader="false" :pagination="false">
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'status'">
          <check-circle-outlined  style="color: green"/>
          <stop-outlined style="color:red" />
          <loading-outlined />
        </template>
        <template v-if="column.key === 'act'">
          <div style="display: flex;justify-content: space-between">
            <a-button type="primary" size="small">启用</a-button>
  <!--          <a-button danger size="small">停止</a-button>-->
            <a-button size="small">配置</a-button>
          </div>
        </template>
      </template>
    </a-table>
  </a-card>
</template>
